<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" @click="back">
						<u-icon name="arrow-left" color="#fff" size="36"></u-icon>
					</view>
					<view class="page_title font_18_FFF">成单案例</view>
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../../static/img/lawyerVersion/xibao-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d ">
				<view class="flex flex_end u-p-r-32">
					<view class="m-d-t" @click="toadd">
						上传成单案例
					</view>
				</view>
				<view class="xb-div2">
					<view class="border_bottom_F6F6F6 u-p-b-24">
						<view class="font_20_333 font_weight">
							恭喜{{detail.l_user.name}}{{detail.l_user.type==1?'律师':'法学生'}}在北京成案{{detail.price}}元
						</view>
						<view class="flex flex_sb u-m-t-24 font_12_999">
							<view>{{detail.created_at}}</view>
							<view>{{detail.views}}浏览</view>
						</view>
					</view>
					<view class="flex u-m-t-32">
						<view class="l-k"></view>
						<view class="font_16_333 font_weight u-m-l-16">
							成案律师
						</view>
					</view>
					
					<view class="ls-div u-m-t-26">
						<image class="tw-lsbg" src="../../../../static/img/home/tw-lsbg.png" mode=""></image>
						<view class="flex">
							<image class="headimg" :src="detail.l_user.avatar" mode=""></image>
							<view class="u-m-l-20  ">
								<view class="flex">
									<view class="font_14_333 font_weight">
										{{detail.l_user.name}}{{detail.l_user.type==1?'律师':'法学生'}}
									</view>
									<view class="flex">
										<image class="u-m-l-8 h23" src="../../../../static/img/home/h23.png" mode=""></image>
										<view class="font_10_333 u-m-l-8">
											北京
										</view>
									</view>
									<view class="flex u-m-l-16 ">
										<image class="h24" src="../../../../static/img/home/h24.png" mode=""></image>
										<view class="pf-t">5.0</view>
									</view>
								</view>
								<view class="u-m-t-14 font_10_666">
									执业证号：{{detail.l_user.license_num}}
								</view>
							</view>
						</view>
					</view>
					<view class="flex u-m-t-32">
						<view class="l-k"></view>
						<view class="font_16_333 font_weight u-m-l-16">
							案件信息
						</view>
					</view>
					<view class="ajxx-div">
						<view class="ajxx-item flex flex_sb">
							<view class="">成案信息渠道</view>
							<view class="font_14_000">{{detail.from.name}}</view>
						</view>
						<view class="ajxx-item flex flex_sb">
							<view class="">案件类型</view>
							<view class="font_14_000">{{detail.task.name}}</view>
						</view>
						<view class="ajxx-item flex flex_sb">
							<view class="">成案地点</view>
							<view class="font_14_000">{{detail.province.name}}</view>
						</view>
						<view class="ajxx-item flex flex_sb">
							<view class="">成案周期</view>
							<view class="font_14_000">{{detail.dur}}天</view>
						</view>
						<view class="ajxx-item flex flex_sb">
							<view class="">涉案金额</view>
							<view class="font_14_000">{{detail.price_dur}}元</view>
						</view>
						<view class="ajxx-item flex flex_sb">
							<view class="">成案委托金额</view>
							<view class="font_14_000">{{detail.price}}元</view>
						</view>
					</view>
					<view class="flex u-m-t-32">
						<view class="l-k"></view>
						<view class="font_16_333 font_weight u-m-l-16">
							案件介绍
						</view>
					</view>
					<view class="ajxx-div ajxx-text u-padding-24">
						{{detail.content}}
					</view>
					<view class="ajxx-text ajxx-div2 u-padding-24 u-m-t-32">
						本文版权归原作者所有，内容仅代表作者本人观点，不代表平台的立场。如有任何疑问或需要删除请通过[客服中心]联系我们。
					</view>
				</view>
				<view class=" u-m-t-44">
					<view class="font_16_333 font_weight u-m-l-32">
						精选案例
					</view>
				</view>
				<view class="xb-div">
					<view class="flex xb-item" v-for="(item,index) in list" :key="index" @click="todetail">
						<view class="headimg">
							<image class="headimg" :src="item.l_user.avatar" mode=""></image>
						</view>
						<view class="u-m-l-20">
							<view class="">
								恭喜{{item.l_user.name}}{{item.l_user.type==1?'律师':'法学生'}}在北京成案{{item.price}}元
							</view>
							<view class="font_12_999 u-m-t-16">
								{{item.created_at}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	export default {
		data() {
			return {
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#fff'],
					slideBackgroundColor: [1, '#E39019']
				},
				id:'',
				detail:[],
				list:[]
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onLoad(e) {
			this.id = e.id
			this.gedetail()
			this.gelist()
		},
		methods: {
			gedetail(){
				this.$api({
					url: '/lawyer/success_detail',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						id:this.id 
					},
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
					} 
				})
			},
			gelist(){
				this.$api({
					url: '/lawyer/success_order',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						limit:100 
					},
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.data
					} 
				})
			},
			back() {
				uni.navigateBack()
			},
			todetail(){
				uni.redirectTo({
					url: "/subPackageA/pages/lawyerVersion/index/goodNewsDetail"
				})
			},
			toadd(){
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/index/goodNewsAdd"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.nav_wrap {
		width: 100%;
		position: relative;
	
		.back_wrap {
			position: absolute;
			left: 24rpx;
	
			.diqu {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 12rpx;
			}
	
			.dq-icon {
				width: 28rpx;
				height: 34rpx;
			}
		}
	
		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
		}
	}
	.main-div {
		position: relative;
		width: 100%;
		background-color: #FFE7AF;
		height: 400rpx;

		.main-bg {
			width: 100%;
			height: 400rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.m-d {
			position: relative;
			padding-top: 88rpx;
			z-index: 2;
			
		}
	}

	.m-d-t {
		margin-top: 16rpx;
		width: 212rpx;
		height: 56rpx;
		background: linear-gradient( 177deg, #FFF7EA 0%, #ECA561 100%);
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		font-size: 24rpx;
		color: #713005;
		text-align: center;
		line-height: 56rpx;
	}



	.headimg {
		width: 72rpx;
		height: 90rpx;
		background-color: #eee;
	}
	.xb-div2{
		margin-top: 20rpx;
		position: relative;
		z-index: 2;
		width: 750rpx;
		// height: 1824rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding: 44rpx 32rpx;
		
		.l-k{
			width: 8rpx;
			height: 24rpx;
			background: #FC9E2F;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
		
		.ls-div {
			position: relative;
			width: 686rpx;
			height: 120rpx;
			background: linear-gradient(90deg, #FFF8EF 0%, #FFFBF5 55%, #FFF8EF 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F4CF9C;
			padding: 18rpx 24rpx;
			margin: 0 auto;
			
			.tw-lsbg {
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		
			.headimg {
				height: 84rpx;
				width: 68rpx;
				border-radius: 8rpx;
			}
		
			.h23 {
				width: 24rpx;
				height: 20rpx;
			}
		
			.h24 {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		
			.pf-t {
				font-size: 20rpx;
				color: #FD8643;
			}
		}
		.ajxx-text{
			line-height: 56rpx;
			
		}
		.ajxx-div2{
			width: 686rpx;
			// height: 120rpx;
			background: #FBFBFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F6F6FB;
			font-size: 24rpx;
			color: #999999;
			line-height: 32rpx;
		}
		.ajxx-div{
			width: 686rpx;
			// height: 528rpx;
			background: #FFFBF6;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #FCF4E9;
			margin-top: 24rpx;
			padding: 0 24rpx;
			
			.ajxx-item{
				height: 88rpx;
				border-bottom: 2rpx solid #F3F4F8;
				
			}
		}
	}
	.xb-div {
		margin-top: 20rpx;
		position: relative;
		z-index: 2;
		padding-bottom: 40rpx;

		.xb-item {
			width: 686rpx;
			// height: 138rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 24rpx;
			margin: 16rpx auto;
		}
	}
</style>